import React, { useState } from "react"
import { Text, Navigator, Button, View } from "@tarojs/components"
import GpIcon from "@/components/GpFontIcon"
import clsx from "clsx"
import { Backdrop } from "@taroify/core"
import { commonUrls, navigation } from "@/utils/router"
import Taro from "@tarojs/taro"
import { pageMapper, tabbarPages } from "@/constants/pageMap"
import styles from "./index.module.scss"

type IProps = {
  className?: string
  id?: string | number
  type?: string | number | null
  navigationTitle?: string | null
  /** @default true */
  showIndex?: boolean
  /** 是否保留该旧导航
   * @since 艺考社区2.0改版
   * @default false
   */
  preserve?: boolean
}

const GpTabbar: React.FC<IProps> = (props: IProps) => {
  const { className, id, type, navigationTitle, showIndex = true, preserve = false } = props
  const [showPop, setShowPop] = useState(false)
  function handleClickNavBtn() {
    setShowPop(prev => !prev)
  }
  function handlePhoneCall() {
    Taro.makePhoneCall({
      phoneNumber: "400-660-3310"
    })
  }
  function hanldeJumpIndex() {
    navigation(tabbarPages.index, null, "switchTab")
  }
  function handleCloseBackdrop() {
    setShowPop(false)
  }
  function handleJumpConsult() {
    navigation(pageMapper.external, { type, id, sourceTitle: navigationTitle })
  }
  if (!preserve) return null
  return (
    <React.Fragment>
      <View className={styles["tabbar-wrap"]}>
        <View className={clsx(styles["tabbar"], className)}>
          {showIndex && (
            <View
              className="flex flex-col items-center flex-none mr-46px"
              onClick={hanldeJumpIndex}
            >
              <GpIcon icon="icon-gongzuotai1" color="#666" size={40} />
              <Text className="yahei-ui font-normal text-22px text-hex-666 pt-8px">首页</Text>
            </View>
          )}
          <View
            className="flex flex-col items-center flex-none mr-52px"
            onClick={handleClickNavBtn}
            style={showIndex ? void 0 : { marginRight: "auto" }}
          >
            <GpIcon icon="icon-neirongguanli1" color="#666" size={40} />
            <Text className="yahei-ui font-normal text-22px text-hex-666 pt-8px">艺考导航</Text>
          </View>
          <View className={clsx(styles["opt-btn"], styles["call"])} onClick={handlePhoneCall}>
            电话咨询
          </View>
          <Button
            onClick={handleJumpConsult}
            className={clsx(styles["opt-btn"], styles["contact"])}
          >
            在线咨询
          </Button>
        </View>
      </View>
      <View className={styles["tabbar-placeholder"]}></View>
      <Backdrop open={showPop} closeable onClose={handleCloseBackdrop} />
      <View
        className={clsx(styles["pop-container"], {
          [styles["show-pop"]]: showPop
        })}
      >
        <View className="mt-30px">
          <View className="yahei-bold font-bold text-32px text-hex-1d2737 mb-32px">热门导航</View>
          <View className={styles["tag-item-wrap"]}>
            {showIndex && (
              <Navigator
                url={"/" + tabbarPages.index}
                className={styles["tag-item"]}
                hoverClass="none"
                openType="reLaunch"
              >
                首页
              </Navigator>
            )}
            <Navigator url={commonUrls.shoolQuery} className={styles["tag-item"]} hoverClass="none">
              院校查询
            </Navigator>
            <Navigator
              url={commonUrls.professional}
              className={styles["tag-item"]}
              hoverClass="none"
            >
              专业大全
            </Navigator>
            <Navigator
              url={commonUrls.institution}
              className={styles["tag-item"]}
              hoverClass="none"
              openType="switchTab"
            >
              培训机构
            </Navigator>
          </View>
        </View>
        <View className="mt-40px pb-160px">
          <View className="yahei-bold font-bold text-32px text-hex-1d2737 mb-32px">热门栏目</View>
          <View className={styles["tag-item-wrap"]}>
            <Navigator url={commonUrls.trainGuide} className={styles["tag-item"]} hoverClass="none">
              培训指南
            </Navigator>
            <Navigator url={commonUrls.proExplain} className={styles["tag-item"]} hoverClass="none">
              专业解读
            </Navigator>
            <Navigator url={commonUrls.introBadge} className={styles["tag-item"]} hoverClass="none">
              招生简章
            </Navigator>
            <Navigator url={commonUrls.column} className={styles["tag-item"]} hoverClass="none">
              知识百科
            </Navigator>
            <Navigator
              url={commonUrls.columnArticle}
              className={styles["tag-item"]}
              hoverClass="none"
            >
              艺考专题
            </Navigator>
            <Navigator url={commonUrls.news} className={styles["tag-item"]} hoverClass="none">
              最新资讯
            </Navigator>
            <Navigator
              url={commonUrls.institutionRanking}
              className={styles["tag-item"]}
              hoverClass="none"
            >
              机构排名
            </Navigator>
            <Navigator url={commonUrls.examQA} className={styles["tag-item"]} hoverClass="none">
              艺考问答
            </Navigator>
            <Navigator url={commonUrls.calculator} className={styles["tag-item"]} hoverClass="none">
              算分神器
            </Navigator>
          </View>
        </View>
      </View>
    </React.Fragment>
  )
}
export default GpTabbar
